<template>
	<view class="container">
		<view class="header">
			<!--自定义头部状态栏-->
			<!-- #ifdef APP-PLUS -->  
			<!-- <view class="status_bar">  
				<view class="top_view"></view>  
			</view>  -->
			<!-- #endif --> 
			<!-- <view class="header-t">
				<image src="../../static/homepage/fh.png" mode=""></image>
				<text>个人主页</text>
				<image src="../../static/homepage/fx.png" mode=""></image>
			</view> -->
			<view class="henxian">
			</view>
			<view class="header-m u-flex u-row-between">
				<view class="u-flex">
					<view class="xmkk" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
						<text>{{team.name}}</text>
					</view>
					<view style="width:400rpx;" class="u-m-l-24">
						<view class="xm">
							<text class="mz">{{team.name}}</text>
							<text class="u-light-color u-m-l-10">{{team.code}}</text>
						</view>
						<view class="gr" style="display: flex; align-items: center;">
							<view class="grk">
								团队
							</view>
							<u-rate class="star" v-model="value" :count="count" :active-color="activeColor" :inaction-color="inactiveColor" :disabled="disabled"></u-rate>
							
						</view>
					</view>
				</view>
				<view class="gzbtn" @click="addInsertFollow">
					立即关注
				</view>
			</view>
			<image class="bmx" src="../../static/homepage/bmx.png" mode=""></image>
			<view class="header-b">
			</view>
		</view>
		<view class="middle">
			<view class="xxk" style="">
			     <zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs">
			     </zzx-tabs>
			</view> 
			<view class="xxknr" style="">
			    
			    <view v-show="current === 0">
			        <view class="u-m-l-26 u-m-t-35 tuandui">
			        	<image  src="../../static/homepage/cytd.png" mode=""></image>
						<text class="cytd">团队成员</text>
						<text class="gs">{{teams.length}}个</text>
			        </view>
					<view class="teamName">
						<view @click="getuser(item.id)" v-for="(item,index) in teams" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + tdbk + ')' }">
							<text class="u-line-2">{{item.name}}</text>
						</view>
					</view>
			    </view>
			    <view v-show="current === 1">
			        <view class="u-m-l-26 u-m-t-35 tuandui">
			        	<image style="width: 34rpx;height: 34rpx;"  src="../../static/homepage/njyqy.png" mode=""></image>
			        	<text class="cytd">N+1企业</text>
			        	<text class="gs">{{teamNames.length}}个</text>
			        </view>
			        <view class="teamName">
			        	<view v-for="(item,index) in teamNames" :key="index" class="tdbk" :style="{ backgroundImage: 'url(' + tdbk + ')' }">
			        		<text>企业名称</text>
			        	</view>
			        </view>
			    </view>
				<view v-show="current === 2">
				    <view class="yeji">
				    	<view v-for="(item,index) in achievement" :key="index" class="yjxq">
				    		<view class="yjxq-t">
				    			<image  src="../../static/homepage/xm.png" mode=""></image>
								<text>{{item.title}}</text>
				    		</view>
							<view class="yjxj">
								<text class="left">项目名称</text>
								<text class="right">{{item.projectName}}</text>
							</view>
							<view class="yjxj-t">
								<text class="left">类型</text>
								<text class="right">{{item.type}}</text>
							</view>
							<view class="yjxj-t">
								<text class="left">阶段</text>
								<text class="right">{{item.stage}}</text>
							</view>
							<view class="yjxj-t">
								<text class="left">规模</text>
								<text class="right">{{item.scale}}</text>
							</view>
							<view class="yjxj-t">
								<text class="left">时间</text>
								<text class="right">{{item.time}}</text>
							</view>
							<view class="yjxj-t">
								<text class="left">项目地点</text>
								<text class="right">{{item.projectPlace}}</text>
							</view>
							<view class="yjxj-t">
								<text class="left">本身作用</text>
								<text class="right">{{item.effect}}</text>
							</view>
							<view class="gap">
								
							</view>
				    	</view>
				    </view>
				</view>
				<view v-show="current === 3">
				    <view class="zhgd">
				    	<text @click="qb()" :class="[currentTab == 0 ? 'qb' : '']" >全部</text>
						<text @click="hp()" :class="[currentTab == 1 ? 'qb' : '']">好评</text>
						<text @click="cp()" :class="[currentTab == 2 ? 'qb' : '']">差评</text>
				    </view>
					<view class="f-list u-flex u-m-b-20 u-m-t-28" v-for="(item, index) in list" :key="index">
						<view class="qylg" :style="{ backgroundImage: 'url(' + bjxm + ')' }">
							<text>{{item.logo}}</text>
						</view>
						<view class="f-item u-m-l-32">
							<view class="title u-m-t-12">{{ item.name }}</view>
							<view class="syxx">
								<!-- <image class="xx"  src="../../static/homepage/sxxx.png" mode=""></image>
								<image class="xx"  src="../../static/homepage/sxxx.png" mode=""></image>
								<image class="xx"  src="../../static/homepage/sxxx.png" mode=""></image>
								<image class="xx"  src="../../static/homepage/sxxx.png" mode=""></image>
								<image class="xx"  src="../../static/homepage/kxxx.png" mode=""></image> -->
								<u-rate class="star" v-model="value" :count="count" :active-color="activeColor" :inaction-color="inactiveColor" :disabled="disabled"></u-rate>
								<text class="time">{{date}}</text>
							</view>
							<view class="explain u-m-t-25">{{ item.explain }}</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view style="height:110rpx;"></view>
		<view class="bottom">
			<view class="zx">
			</view>
			<button class="gtbtn">立即沟通</button>
		</view>
	</view>
</template>

<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
	    components: {
	        zzxTabs
	    },
	    data() {
	        return {
				id:'',
				team:'',
				teams:[],
				activeColor: '#FF9900',
				inactiveColor: '#FFE2CF',
				disabled: true,
				count: 5,
				value: 4,
	            items: ['成员','智汇N+1','业绩','智汇观点'],
	            current: 0,
				currentTab: 0,
				date: new Date().toISOString().slice(0, 10),
				bjxm: "../../static/homepage/xmkk.png",
				tdbk: "../../static/homepage/tdmckk.png",				
				teamNames:[],
				achievement:[
					// {
					// 	title:'项目一',
					// 	projectName:'武汉鹦鹉洲长江二桥设计项目',
					// 	type:'规划设计',
					// 	stage:'规划',
					// 	scale:'大型工程',
					// 	time:'2010.08——2012.06',
					// 	projectPlace:'武汉',
					// 	effect:'主导'
					// },
					// {
					// 	title:'项目二',
					// 	projectName:'武汉鹦鹉洲长江二桥设计项目',
					// 	type:'规划设计',
					// 	stage:'规划',
					// 	scale:'大型工程',
					// 	time:'2010.08——2012.06',
					// 	projectPlace:'武汉',
					// 	effect:'主导'
					// },
					// {
					// 	title:'项目二',
					// 	projectName:'武汉鹦鹉洲长江二桥设计项目',
					// 	type:'规划设计',
					// 	stage:'规划',
					// 	scale:'大型工程',
					// 	time:'2010.08——2012.06',
					// 	projectPlace:'武汉',
					// 	effect:'主导'
					// }
				],
				list:[
					// {
					// 	name:'武汉市政建设有限公司',
					// 	logo:'企业',
					// 	explain:'规划设计工作非常专业，合作很愉快！'
					// },
					// {
					// 	name:'武汉市政建设有限公司',
					// 	logo:'企业',
					// 	explain:'规划设计工作非常专业，合作很愉快！'
					// },
					// {
					// 	name:'武汉市政建设有限公司',
					// 	logo:'企业',
					// 	explain:'规划设计工作非常专业，合作很愉快！'
					// },
					// {
					// 	name:'武汉市政建设有限公司',
					// 	logo:'企业',
					// 	explain:'规划设计工作非常专业，合作很愉快！'
					// }
				]
					
				
	        };
	    },
		onLoad(options){
			if(options.id){
				this.id= options.id;
				this.initPage();
			}
		},
	    methods: {
		  async initPage(){
			  let result = await this.$apis.findTeamById({id:this.id});
			  this.team = result.data;		
				this.Details(this.id);
		  },		  
		  async Details(id){
		  	let result = await this.$apis.findTeamDetails({teamId:id});
		  	this.teams = result.data;
		  	
		  },
		  //团员详情
		  async getuser(e){
		  	this.$mRouter.push({
		  		route:this.$mRoutesConfig.releaseNumber,
		  		query:{
		  			id:e
		  		}
		  	});
		  },
	      onClickItem(e) {
	        if (this.current !== e.currentIndex) {
	            this.current = e.currentIndex;
	        }
	      },
		  async addInsertFollow(){
		  	let reqBody = {
		  		"noticedId": this.id  //被关注人ID
		  	};
		  	let result = await this.$apis.insertFollow(reqBody);
		  	if(result.code == 200){
		  		uni.showToast({
		  			title:'关注成功'
		  		})
		  	}
		  },
	    }
	}
</script>

<style scoped lang="scss">
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    top: 0;  
	    z-index: 999;  
	} 
	.container{
		width: 100%;
	}
	// .header {
	//   position: fixed;
	//   top: 88rpx;
	//   left: 0;
	//   z-index: 99;
	//   width:100%;
	//   height:82rpx;
	// }
	.header-t{
		padding: 36rpx 30rpx 28rpx 22rpx;
		display: flex;
		justify-content: space-between;
		color: #0D1D36;
		font-size: 32rpx;
		font-weight: 500;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		
	}
	.henxian{
		width: 750rpx;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	.header-m{
		display: flex;
		align-items: center;
		padding-top: 19rpx;
		.xmkk{
			width: 102rpx;
			height: 118rpx;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 28rpx;
			text-align: center;
			overflow: hidden;
			text{
				color: #888D99;
				font-size: 20rpx;
				line-height: 118rpx;
			}
		}
		.xm{
			.mz{
				font-size: 30rpx;
				color: #0D1D36;
				font-weight: 600;
			}
			.fbh{
				margin-left: 20rpx;
				font-size: 26rpx;
				color: #AB61FF;
			}
			.fbhtp{
				margin-left: 8rpx;
				width: 14rpx; height: 22rpx;
			}
		}
		.gr{
			display: flex;
			margin-top: 15rpx;
			.grk{
				width: 72rpx;
				height: 38rpx;
				border: 1rpx solid #4B9CFF;
				border-radius: 6rpx;
				font-size: 24rpx;
				color: #4B9CFF;
				text-align: center;
			}
			.star {
				// background: #ffe2cf;
				// padding: 25rpx 26rpx;
				// border-radius: 10rpx 10rpx 0 0;
				color: #ff3300;
			}
			.syxx{
				margin-left: 19rpx;
			}
			.xx{
				width: 24rpx; height: 24rpx;
				margin-left: 7rpx;
			}
		}
		.gzbtn{
			width: 153rpx;
			height: 58rpx;
			margin-right:30rpx;
			border: 2rpx solid #AB61FF;
			border-radius: 29rpx;
			color: #AB61FF;
			font-size: 26rpx;
			text-align: center;
			line-height: 58rpx;
		}
	
	}
	.bmx{
		margin-top: 26rpx;
		width: 100%;
		height: 6rpx;
	}
	.header-b{
		// margin-top: 26rpx;
		width: 750rpx;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	.xxk{
		margin-top: 20upx;
		border-width: 0 0 1rpx 0;
		border-style: solid;
		border-color: #DADFED;
	}
	.xxknr{
		margin-top: 20upx;
		color:#0D1D36;
		// font-size: 24upx;
		// height: 260upx;
		.details{
			margin-top: 41rpx;
			.left{
				color: #888E9A;
				font-size: 30rpx;
				
			}
			.right{
				position: absolute;
				color: #0E1E36;
				font-size: 30rpx;
				left: 216rpx;
				font-weight: 600;
			}
			.tips {
				margin-left: 69rpx;
				text{
					// margin-left: 24rpx;
					width: 129rpx;
					height: 42rpx;
					font-size: 26rpx;
					color: #4C9CFF;
					background: #EDF5FF;
					text-align: center;
					line-height: 42rpx;
				}
			}
			
		}
	}
	.bottom{
			position: fixed;
			bottom: 0;
			width:100%;
			border-top: 1px solid #DADFED;
			background-color: #fff;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		.gtbtn{
				width: 662rpx;
				height: 80rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				background: #ab61ff;
				border-radius: 40rpx;
		}
	}
	.tuandui{
		display: flex;
		align-items: center;
		image{
			width: 48rpx;height: 48rpx;
		}
		text{
			color: #4C9CFF;
			font-size: 34rpx;
			font-weight: 600;
		}
		.cytd{
			margin-left: 13rpx;
		}
		.gs{
			margin-left: 33rpx;
		}
	}
	.teamName{
		display: flex;
		flex-wrap: wrap;
		.tdbk{
			width: 143rpx;
			height: 165rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-top: 35rpx;
			margin-left: 35rpx;
			text-align: center;
			display: flex;
			justify-content:center;
			align-items: center;
			overflow: hidden;
			text{
				color: #888D99;
				font-size: 28.19rpx;
			}
		}
	}
	.yjxq-t{
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-top: 45rpx;
		image{
			width: 48rpx;height: 48rpx;
		}
		text{
			font-size: 34rpx;
			color: #4C9CFF;
			font-weight: 600;
		}
	}
	.yjxj{
		padding-left: 28rpx;
		margin-top: 40rpx;
		width: 100%;
		height: 59rpx;
		background-color: #F1F7FF;
		line-height: 59rpx;
		.left{
			font-size: 30rpx;
			color: #888E9A;
		}
		.right{
			position: absolute;
			left: 216rpx;
			color: #0E1E36;
			font-size: 30rpx;
		}
	}
	.yjxj-t{
		padding-left: 28rpx;
		margin-top: 31rpx;
		.left{
			font-size: 30rpx;
			color: #888E9A;
		}
		.right{
			position: absolute;
			left: 216rpx;
			color: #0E1E36;
			font-size: 30rpx;
		}
	}
	.gap{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 39rpx;
	}
	.zhgd{
		margin-top: -20rpx;
		width: 100%;
		height: 84rpx;
		background-color: #F5F5F9;
		display: flex;
		justify-content: space-around;
		line-height: 84rpx;
		font-size: 28rpx;
		color: #4C9CFF;
	}
	.qb{
		width: 152rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		background-color: #FF9A00;
		margin-top: 16rpx;
		color: #ffffff;
		border-radius: 27rpx;
	}
	// 智汇观点
	.qylg{
			width: 102rpx;
			height: 118rpx;
			background-size: 100% auto;
			background-position: 0 bottom;
			margin-left: 28rpx;
			margin-top: 15rpx;
			text{
				color: #888D99;
				font-size: 26rpx;
				line-height: 118rpx;
				margin-left: 27rpx;
			}
		}
		.xx{
			width: 24rpx; height: 24rpx;			
		}
		.time{
			color: #888E9A;
			font-size: 26rpx;
			margin-left: 225rpx;
		}
		.title{
			color: #0E1E36;
			font-size: 30rpx;
			font-weight: bold;
		}
		.explain{
			color: #888E9A;
			font-size: 28rpx;
		}
		.f-list{
			padding: 0 0 28rpx 0;
			border-width: 0 0 1rpx 0;
			border-style: solid;
			border-color: #DADFED;
		}
</style>
